<template>

    <n-modal v-model:show="modalShow" preset="card" title="文件预览(不支持ppt、xls、doc文件预览)" size="huge" :bordered="false">
        <div class="previewBox">
            <Suspense>
                <template #default>
                    <vue-office-docx v-if="preViewItem.type == 'word'" style="height: 80vh;min-width: 800px;"
                        :src="preViewItem.blobUrl" />
                </template>
                <template #fallback>
                    <h1>DOCX文件努力加载中，请稍候，不要离开！</h1>
                </template>
            </Suspense>

            <Suspense>

                <template #default>
                    <vue-office-excel :options="eoptions" v-if="preViewItem.type == 'excel'" :src="preViewItem.blobUrl"
                        style="height: 80vh;min-width: 800px;" />
                </template>
                <template #fallback>
                    <h1>EXCEL文件加载中，请稍候，不要离开！</h1>
                </template>
            </Suspense>

            <Suspense>

                <template #default>
                    <vue-office-pdf v-if="preViewItem.type == 'pdf'" style="height: 80vh;min-width: 800px;"
                        :src="preViewItem.blobUrl" />
                </template>
                <template #fallback>
                    <h1>PDF文件加载中，请稍候，不要离开！</h1>
                </template>
            </Suspense>


            <iframe v-if="['textFile', 'ppt'].includes(preViewItem.type)" :src="preViewItem.type == 'ppt'
                ? `/PPTXjs-master/index.html?url=${preViewItem.blobUrl}`
                : preViewItem.blobUrl
                " frameborder="0" style="width: 100%; height: 80vh;"></iframe>
            <img v-if="preViewItem.type == 'image'" :src="preViewItem.blobUrl" style="height: 100%; width: 100%"
                alt="" />
            <video v-if="preViewItem.type == 'video'" :src="preViewItem.blobUrl" style="height: 100%; width: 100%"
                autoplay="false" mute controls></video>
        </div>
    </n-modal>

</template>

<script setup lang="ts">
import "@vue-office/excel/lib/index.css";
import { defineAsyncComponent, ref } from 'vue';
import { eoptions } from "@/utils/constData"
const VueOfficeDocx = defineAsyncComponent(() => import('@vue-office/docx'))
const VueOfficeExcel = defineAsyncComponent(() => import('@vue-office/excel'))
const VueOfficePdf = defineAsyncComponent(() => import('@vue-office/pdf'))
defineProps({
    preViewItem: {
        type: Object,
        default: () => ({})
    },
})
const modalShow = ref<boolean>(false)
defineExpose({
    modalShow,
})


</script>

<style scoped>
.previewBox {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
</style>